<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="../css/site.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="../jquery/jquery-3.4.1.js"></script>

    <style>
        *{
            margin: 0;
            padding:0;
        }
        #container{
            margin-left: 5%;
            background-color: #5cb85c;
        }
        #photo_box{
            float: left;
            width: 100px;
            text-align: center;
            /*background-color: #5bc0de;*/
        }
        #user_photo{
            float: left;
            width: 100px;
            height:100px;
            border-radius: 50%;
        }
        #people{
            float: left;
            margin-left: 2%;
            /*background-color: #5cb85c;*/
        }
        #info_box{
            float: left;
            margin-left: 10%;
        }
        #info{
            list-style: none;
            /*background-color: #d4d4d4;*/
        }
        ul {
            list-style-type: none;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">

                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active">
                            <a href="a.html">我的</a>
                        </li>
                        <li>
                            <a href="settings.htm">版块二</a>
                        </li>
                        <li>
                            <a href="help.htm">板块三</a>
                        </li>
                    </ul>

                    <form class="navbar-search pull-left" action="">
                        <input type="text" class="search-query span2" placeholder="Search" />
                    </form>

                    <ul class="nav pull-right">
                        <li>
                            <a href="">${user.userName}</a>           <%-- 这种写法    <%=session.getAttribute("username")%>   --%>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span3">
            <div class="well" style="padding: 8px 0;">
                <ul class="nav nav-list">
                    <li>
                        <a href="http://localhost:8888/forum/4_user/a.jsp"><i class="icon-black icon-home"></i> 首页</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/dongtai.jsp"><i class="icon-folder-open"></i> 动态</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/collect.jsp"><i class="icon-folder-open"></i> 收藏</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/concernlist.jsp"><i class="icon-envelope"></i> 关注</a>
                    </li>
                    <li>
                        <a href="http://localhost:8888/forum/4_user/concernedlist.jsp"><i class="icon-envelope"></i> 粉丝</a>
                    </li>
                    <li class="active">
                        <a href="http://localhost:8888/forum/4_user/personalInformation.jsp" ><i class="icon-user"></i>个人资料</a>
                    </li>
                    <li class="divider">
                </ul>
            </div>
        </div>



        <h2 style="margin-left: 10%; float:left">个人资料</h2>

        <a href="http://localhost:8888/forum/4_user/personalInformationUpdate.jsp">
            <button type="button" class="btn btn-info" style="float:right">我要修改</button>
        </a>

        <br><br>
<hr>

<div id="container">

    <div id="photo_box" style="margin-left: 20px">
        <div >
            <img id="user_photo" src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853" alt="" >
        </div>
        <div >
            <a href="">修改头像</a>
        </div>

        <hr>
    </div>




        <div >

            <div id="info_box" >
                <ul id="user">

                </ul>
            </div>

            <script src="../jquery/jquery-3.4.1.js"></script>

            <script>

                function show() {
                    $.ajax({
                        url:'/forum/usercenter/selectByUserId?id=1',
                        dataType:"json",
                        type:"get",
                        success:function (data) {
                            console.log(data)
                            console.log(data.userId)
                            showInfo(data)
                            // sessionStorage.setItem("userId",data.userId);//sessionStorage本地存储数据

                        }
                    })
                }
                function showInfo(jsonObj){
                    console.log(jsonObj)

                    var html = ''

                        html = html + "<li style=\"margin-top: 5px\">姓名："
                        html = html + jsonObj.userName
                        html = html + "</li><li style=\"margin-top: 5px\">性别："
                        html = html + jsonObj.userSex
                        html = html + "</li> <li style=\"margin-top: 5px\">生日："
                        html = html + jsonObj.userBirthday
                        html = html + "</li><li style=\"margin-top: 5px\">QQ："
                        html = html + jsonObj.userQq
                        html = html + "</li><li style=\"margin-top: 5px\">地区："
                        html = html + jsonObj.userArea
                        html = html + "</li><li style=\"margin-top: 5px\">手机号码："
                        html = html + jsonObj.userPhone
                        html = html + " </li>"

                    var ul = document.getElementById("user");
                    // innerHTML会解析后面字符串中的html标签
                    ul.innerHTML = html
                }

                show()

            </script>
        </div>
</div>
    </div>
</div>

</body>
</html>
